<script>
export default {
  data() {
    return {
      data1: [
        { project: '1', score: '1' },
        { project: '2', score: '2' },

      ],
      selectedRows1: [],
    };
  },
  methods: {
    handleSelectionChange1(selection) {
      this.selectedRows1 = selection;
    },
    getSummary1(param) {
      const { columns } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        if (column.property === 'score') {
          const values = this.selectedRows1.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = '0';
          }
        } else {
          sums[index] = '';
        }
      });
      return sums;
    },
  } 
}
</script>

<template>
  <el-container>
    <el-main class="main">
       <div class="first">
        <p>（1） 思想上进</p>
        <el-table :data="data1" ref="table" border show-summary :summary-method="getSummary1" @selection-change="handleSelectionChange1" show-overflow-tooltip>
          <el-table-column label="加分项目" prop="project" min-width="25"></el-table-column>
          <el-table-column label="分值" prop="score" min-width="10"></el-table-column>
          <el-table-column label="操作" type="selection"></el-table-column>
        </el-table>
       </div>
       <div class="first">
        <p>（2） 获得荣誉</p>
        <el-table :data="data1" ref="table" border show-summary :summary-method="getSummary2" @selection-change="handleSelectionChange2" show-overflow-tooltip>
          <el-table-column label="加分项目" prop="project" min-width="25"></el-table-column>
          <el-table-column label="分值" prop="score" min-width="10"></el-table-column>
          <el-table-column label="操作" type="selection"></el-table-column>
        </el-table>
       </div>
       <div class="first">
        <p>（2） 获得荣誉</p>
        <el-table :data="data1" ref="table" border show-summary :summary-method="getSummary2" @selection-change="handleSelectionChange2" show-overflow-tooltip>
          <el-table-column label="加分项目" prop="project" min-width="25"></el-table-column>
          <el-table-column label="分值" prop="score" min-width="10"></el-table-column>
          <el-table-column label="操作" type="selection"></el-table-column>
        </el-table>
       </div>
       <div class="first">
        <p>（2） 获得荣誉</p>
        <el-table :data="data1" ref="table" border show-summary :summary-method="getSummary2" @selection-change="handleSelectionChange2" show-overflow-tooltip>
          <el-table-column label="加分项目" prop="project" min-width="25"></el-table-column>
          <el-table-column label="分值" prop="score" min-width="10"></el-table-column>
          <el-table-column label="操作" type="selection"></el-table-column>
        </el-table>
       </div>
       <div class="first">
        <p>（2） 获得荣誉</p>
        <el-table :data="data1" ref="table" border show-summary :summary-method="getSummary2" @selection-change="handleSelectionChange2" show-overflow-tooltip>
          <el-table-column label="加分项目" prop="project" min-width="25"></el-table-column>
          <el-table-column label="分值" prop="score" min-width="10"></el-table-column>
          <el-table-column label="操作" type="selection"></el-table-column>
        </el-table>
       </div>
       <div class="first">
        <p>（2） 获得荣誉</p>
        <el-table :data="data1" ref="table" border show-summary :summary-method="getSummary2" @selection-change="handleSelectionChange2" show-overflow-tooltip>
          <el-table-column label="加分项目" prop="project" min-width="25"></el-table-column>
          <el-table-column label="分值" prop="score" min-width="10"></el-table-column>
          <el-table-column label="操作" type="selection"></el-table-column>
        </el-table>
       </div>
    </el-main>
    <el-footer>
      <span>
        注意：1.本页面只显示已审核的加分项目，未审核的加分项目请到“加分申请”页面进行审核；2.本页面只显示已审核的加分项目，未审核的加分项目请到“加分申请”页面进行审核；3.本页面只显示已审核的加分项目，未审核的加分项目请到“加分申请”页面进行审核；4.本页面只显示已审核的加分项目，未审核的加分项目请到“加分申请”页面进行审核；5.本页面只显示已审核的加分项目
      </span>
    </el-footer>
  </el-container>
    
</template>



<style scoped>
.main{
  background-color: #d48484;
  height: 94vh;
  display: table;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.first{
  width: 500px;
}
</style>